<template>
  <a-card>
    <!-- 头部按钮 -->
    <template #extra>
      <a-button
        type=""
        style="margin-right: 10px"
        v-if="isEdit"
        @click="onCancelEdit"
        >取消编辑</a-button
      >
      <a-button
        type="primary"
        style="margin-right: 10px"
        @click="onEdit"
        v-if="!isEdit"
        >编辑</a-button
      >
      <a-button type="primary" @click="onSubmit" v-if="isEdit">提交</a-button>
    </template>
    <!-- 主体 -->
    <a-descriptions bordered>
      <!-- 开工时间 -->
      <a-descriptions-item label="开工时间" :span="2">
        <div v-if="isEdit">
          <a-date-picker
            style="width: 100%"
            v-model:value="editSupervisionList.kgTime"
            @change="OnDatePicker"
          />
        </div>
        <div v-else>{{ supervisionList.kgTime }}</div>
      </a-descriptions-item>
      <!-- 开工情况 -->
      <a-descriptions-item label="开工情况" :span="2">
        <div v-if="isEdit">
          <a-textarea v-model:value="editSupervisionList.kgqk"> </a-textarea>
        </div>
        <div v-else>
          {{ supervisionList.kgqk }}
        </div>
      </a-descriptions-item>
      <!-- 开工备案文件 -->
      <a-descriptions-item label="开工备案文件">
        <div v-if="isEdit">
          <a-upload
            :file-list="fileList"
            :remove="handleRemove"
            :before-upload="beforeUpload"
            :multiple="true"
          >
            <a-button>
              <upload-outlined></upload-outlined>
              点击上传
            </a-button>
          </a-upload>
        </div>
        <div v-else>
          <div v-for="item in supervisionList.kgbaFile" :key="item.id">
            <a
              :href="`${http}/api/project/constructionPreparation/download?id=${item.id}`"
              >{{ item.name }}</a
            >
          </div>
        </div>
      </a-descriptions-item>
    </a-descriptions>
  </a-card>
</template>

<script setup>
import global from "../../global/global.vue";
import { ref } from "vue";
import {
  getKgbaqkListAPI,
  postkgbaqkSaveOrUpdateAPI,
  kgbaqkMultifileUpload,
} from "@/api/module/constructAndImplement";
import { message } from "ant-design-vue";

const http = process.env.VUE_APP_API_BASE_URL;

// 项目id
const projectId = global.xmid;

const isEdit = ref(false);
const supervisionList = ref({
  kgTime: "2023-02-02",
  kgqk: "0",
  kgbaFileName: "",
});
// 编辑数据
const editSupervisionList = ref({
  fileId: "",
});

// 获取开工备案情况
const ids = ref([]);
const getKgbaqkList = async () => {
  const res = await getKgbaqkListAPI({
    id: projectId,
  });
  supervisionList.value = res.data;
  fileList.value = res.data.kgbaFile;
  ids.value = res.data.kgbaFile.map((item) => item.id);
  console.log(res);
};
getKgbaqkList();

// 选择时间
const OnDatePicker = (date, dateString) => {
  editSupervisionList.value.kgTime = dateString;
};

// 文件上传
const fileList = ref([]);
const handleRemove = (file) => {
  const index = fileList.value.indexOf(file);
  const newFileList = fileList.value.slice();
  newFileList.splice(index, 1);
  fileList.value = newFileList;
  ids.value = ids.value.filter((item) => item !== file.id);
  console.log(ids.value);
};
const beforeUpload = (file) => {
  const allowedTypes = ["doc", "docx", "xls", "xlsx", "pdf"];
  const fileType = file.name
    .slice(file.name.lastIndexOf(".") + 1)
    .toLowerCase();
  ``;
  const isType = allowedTypes.includes(fileType);
  if (!isType) {
    return message.error("上传文件格式错误!");
  }
  fileList.value = [...fileList.value, file];
  return false;
};

// 点击编辑
const onEdit = () => {
  isEdit.value = true;
  editSupervisionList.value = Object.assign({}, supervisionList.value);
  fileList.value = editSupervisionList.value.kgbaFile;
  ids.value = editSupervisionList.value.kgbaFile.map((item) => item.id);
};

// 点击取消
const onCancelEdit = () => {
  fileList.value = [];
  isEdit.value = false;
};

// 点击提交
const onSubmit = async () => {
  // 上传了文件
  if (fileList.value.length !== ids.value.length) {
    const formData = new FormData();
    fileList.value.splice(0, ids.value.length);
    fileList.value.forEach((item) => {
      formData.append("files", item);
    });
    // 上传
    const res = await kgbaqkMultifileUpload(formData);
    ids.value = ids.value.concat(res.data);
  }

  // 提交
  await postkgbaqkSaveOrUpdateAPI({
    id: editSupervisionList.value.id,
    kgTime: editSupervisionList.value.kgTime,
    kgbaFile: ids.value.join(","),
    kgqk: editSupervisionList.value.kgqk,
    xmid: projectId,
  });
  getKgbaqkList();
  fileList.value = [];
  message.success("提交成功");
  isEdit.value = false;
};
</script>

<style lang="less" scoped></style>
